<!DOCTYPE html>
<html>
    <head>
        <!-- 设置编码 -->
        <meta charset="UTF-8">
        <title>视频弹幕</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            /* 通过标签名称设置样式 */
            body{
                background: rgb(245, 245, 245);
            }
            .container{
                width: 500px;
                background: #fff;
                /* 设置元素在页面中间 */
                margin:100px auto;
                padding: 10px;
            }

            .container .top{
                width: 100%;
                position: relative;
                /* 溢出隐藏 */
                overflow: hidden;
            }
            .container .top video{
                width: 100%;
            }

            .container .bot{
                /* 采用flex弹性盒布局 */
                display: flex;
            }

            /* 弹幕数量的宽度 */
            .container .bot .danmu-num{
                width: 100px;
            }

            /* 弹幕颜色选择器的宽度 */
            .container .bot .danmu-color{
                width: 80px;
            }
            /* 弹幕输入框的宽度*/
            .container .bot .danmu-input{
                width: 240px;
            }
            .container .bot .danmu-input input{
                width: 100%;
                height: 25px;
                /* 设置字体大小 */
                font-size:16px;
            }
            /* 弹幕发送按钮的宽度 */
            .container .bot .danmu-btn{
                flex: 1;
                text-align: center;
                background: cyan;
                line-height: 25px;
            }

            .msg{

                /* 设置弹幕最终停留的位置 */
                transform: translateX(600px);
                
                /* 设置绝对定位 */
                position: absolute;
                -webkit-text-stroke: 1px black;
                /* 设置字体的粗细 */
                font-weight: 800;

                /* 使用关键帧动画 */
                animation: l-2-r 6s linear;
            }

            /* 从左到右的移动动画 */
            @keyframes l-2-r {
                from{
                    transform: translateX(0px);
                }
                to{
                    transform: translateX(600px);
                }
            }
        </style>
    </head>

    <body>
        
        <div class="container">
            <div class="top" id="dmList">
                <!-- 修改视频地址 -->
                <video src="https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/cae-legoup-video-target/2bd6df29-c184-4d9e-8a52-824114e8747b.mp4"></video>
            </div>
            <div class="bot">
                <!-- 显示弹幕的数量 -->
                <div class="danmu-num">5678条弹幕</div>
                <!-- 颜色选择器，用来设置弹幕的颜色 -->
                <div class="danmu-color">
                    <!-- input 的type=colo就是颜色选择器 -->
                    <input type="color" id="textColor">
                </div>
                <!-- 弹幕输入框，获取用户的输入 -->
                <div class="danmu-input">
                    <input type="text" id="text">
                </div>
                <!-- 发送按钮，点击之后发送弹幕 -->
                <div class="danmu-btn"  onclick="sendDanmu()">发送弹幕</div>
            </div>
        </div>

        <script>

            var dmList = document.getElementById('dmList')
            console.log(dmList)

            function sendDanmu(){
                // 获取输入框的值
                var text = document.getElementById("text").value;
                console.log(text)

                // 创建元素
                var p = document.createElement("p")
                // 设置p标签的内容
                p.innerText = text;

                //给p标签添加msg类
                p.setAttribute("class","msg") 

                // 设置弹幕的随机高度
                var h = Math.random()*240;
                p.style.top = h + "px"


                // 获得颜色选择器的值
                var color = document.getElementById("textColor").value
                p.style.color = color;

                // 把弹幕添加到页面上
                dmList.appendChild(p)

                // 设置输入框为空
                document.getElementById("text").value = ""



                
                
            }
        </script>
    </body>
</html>